<script setup>
/*----------------------* 后台首页 *----------------------*/
import {ref} from 'vue';
import {ElCard, ElCol, ElDivider, ElRow, ElTag} from 'element-plus';

const projectData = ref({
  name: '平台简介',
  description: 'DevPlatform是专为开发者打造的技术论坛平台，能实现内容分享、互动交流等一站式服务，助力开发者职业发展。它有五大核心功能模块，涵盖板块分类、文章互动、热门推荐、搜索筛选和通用支撑，覆盖技术交流全场景。平台划分普通用户、运营者、管理者三类角色，差异化权限管控保障社区有序。还有信誉审核、积分体系等关键规则，前端用Vue 3和Element Plus，后端基于Java技术栈，同时通过非侵入式广告实现商业化，平衡了盈利与用户体验。',
  version: 'v1.0.0',
  backendTech: ['Java', 'SpringBoot3', 'MyBatis-Plus', 'MySQL8.0', '阿里云平台OSS', 'Druid'],
  frontendTech: ['Vue3', 'Element-UI-Plus', 'Axios', 'Vue-Router'],
  contact: {
    officialWebsite: '3368887080@qq.com',
    qqGroups: ['3368887080'],
    wechat: '/* 13800000000 */',
  },
  updateLogs: [
    {version: 'v1.0.0', date: '2025-09-28', detail: '系统初始版本，包含基础管理功能'},
    // { version: 'v0.9.0', date: '2025-06-15', detail: '新增数据统计模块' },
    // { version: 'v0.8.0', date: '2025-03-10', detail: '优化用户权限管理' },
    // { version: 'v0.7.0', date: '2024-12-05', detail: '修复若干已知 bug' }
  ]
});
</script>

<template>
  <div class="admin-home">
    <ElRow :gutter="20">
      <ElCol :span="16">
        <ElCard class="project-intro-card" shadow="hover">
          <h1 class="project-name">{{ projectData.name }}</h1>
          <ElDivider/>
          <p class="project-desc">{{ projectData.description }}</p>
          <p class="project-version">当前版本: {{ projectData.version }}</p>
        </ElCard>
      </ElCol>
      <ElCol :span="8">
        <ElCard class="tech-stack-card" shadow="hover">
          <h2 class="section-title">技术选型</h2>
          <div class="tech-group">
            <h3 class="tech-type">后端技术</h3>
            <ElTag v-for="tech in projectData.backendTech" :key="tech" class="tech-tag" size="small" type="info">
              {{ tech }}
            </ElTag>
          </div>
          <div class="tech-group">
            <h3 class="tech-type">前端技术</h3>
            <ElTag v-for="tech in projectData.frontendTech" :key="tech" class="tech-tag" size="small" type="info">
              {{ tech }}
            </ElTag>
          </div>
        </ElCard>
      </ElCol>
    </ElRow>

    <ElRow :gutter="20" style="margin-top: 20px;">
      <ElCol :span="8">
        <ElCard class="contact-card" shadow="hover">
          <h2 class="section-title">联系信息</h2>
          <p class="contact-item">邮箱: {{ projectData.contact.officialWebsite }}</p>
          <p class="contact-item">QQ: {{ projectData.contact.qqGroups.join('/') }}</p>
          <p class="contact-item">微信: {{ projectData.contact.wechat }}</p>
        </ElCard>
      </ElCol>
      <ElCol :span="8">
        <ElCard class="update-log-card" shadow="hover">
          <h2 class="section-title">更新日志</h2>
          <div v-for="log in projectData.updateLogs" :key="log.version" class="log-item">
            <span class="log-version">{{ log.version }}</span> - <span class="log-date">{{ log.date }}</span>
          </div>
        </ElCard>
      </ElCol>
    </ElRow>
  </div>
</template>

<style scoped>
.admin-home {
  padding: 20px;
}

.project-intro-card {
  padding: 20px;
}

.project-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.project-desc {
  line-height: 1.6;
  margin-bottom: 10px;
}

.project-version {
  margin-bottom: 15px;
}

.tech-stack-card {
  padding: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.tech-group {
  margin-bottom: 15px;
}

.tech-type {
  font-size: 16px;
  margin-bottom: 8px;
}

.tech-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}

.contact-card, .update-log-card, .donate-card {
  padding: 20px;
}

.contact-item {
  margin-bottom: 8px;
}

.log-item {
  margin-bottom: 8px;
}

.log-version {
  font-weight: bold;
}

.donate-qrcode {
  text-align: center;
}

.qrcode-img {
  width: 120px;
  height: 120px;
}

.qrcode-desc {
  margin-top: 5px;
  font-size: 14px;
}

.donate-tip {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}
</style>